<template>
  <div class="app-container d-flex"
       v-loading="loading"
       element-loading-text="拼命加载中"
       element-loading-spinner="el-icon-loading">
    <div class="h-100 w-7">
      <!-- 宿舍区能耗查询 -->
      <div class="h-100 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区能耗查询</div>
            </div>
          </div>
          <div class="item_content">
            <div class="height-20 w-100 pl-3">
              <el-form size="medium" :inline="true" :model="formInline" :rules="rules" ref="accountModelRef"
                       class="demo-form-inline">
                <el-form-item label="区域:" prop="reportName">
                  <el-cascader
                    v-model="formInline.reportName"
                    placeholder="选择区域"
                    ref="cascaderRef"
                    :options="options"
                    :props="{ checkStrictly: true, label: 'name', expandTrigger: 'hover' }"
                    clearable></el-cascader>
                </el-form-item>
                <el-form-item label="时间范围" prop="time">
                  <el-date-picker
                    v-model="formInline.time"
                    :default-time="['00:00:00', '23:59:59']"
                    :selectable-range="selectableRange"
                    :picker-options="pickerOptions"
                    @change="handleTimeChange"
                    class="datepicker-content"
                    format="yyyy-MM-dd HH"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" :disabled="addOrUpdateLoading" @click="onSubmit">查询</el-button>
                </el-form-item>
              </el-form>
            </div>
            <div class="height-80 w-100 d-flex-center">
              <div class="h-100 w-100" id="line-first"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="h-100 w-5">
      <!-- 宿舍区能耗查询 -->
      <div class="h-100 w-100 p10">
        <div class="h-100 w-100 item_border p10">
          <div class="item_title">
            <div class="d-flex align-items-center">
              <div class="success_point"></div>
              <div class="font-white font-14">宿舍区能耗查询</div>
            </div>
          </div>
          <div class="item_content">
            <div class="h-100 w-100 d-flex-center">
              <div class="h-100 w-100">
                <el-table
                  :data="tableData"
                  height="100%"
                  class="flex-1 over-auto-y"
                  :row-class-name="tableRowClassName"
                  style="width: 100%;height: 100%;">
                  <el-table-column type="index" label="序号" width="70" align="center"/>
                  <el-table-column prop="dataType" label="参数类型" align="center">
                    <template slot-scope="{row}">能耗</template>
                  </el-table-column>
                  <el-table-column prop="paramValue" label="参数值" align="center">
                    <template slot-scope="{row}">{{row.paramValue}} kW·h</template>
                  </el-table-column>

                  <el-table-column prop="dataDate" label="时间" align="center"></el-table-column>
                </el-table>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import charts from './chart.js'
  import {
    queryItemsList,
  } from "@/api/user.js"
  import {
    queryReportByArea,
    queryReportByAreaPage,
  } from "@/api/electrician/index.js"

  export default {
    components: {},
    data() {
      return {
        timeout: [],

        formInline: {
          reportName: [],
          time: [],
        },
        rules: {
          reportName: [{required: true, message: '请选择区域', trigger: 'change'}],
          time: [{required: true, message: '请选择时间范围', trigger: 'change'}],
        },
        loading: false,
        addOrUpdateLoading: false,
        tableData: [],
        oneCarData: {
          xData: ['暂无数据'],
          seriesData: [0],
        },
        twoCardData: {
          xData: [],
          seriesData1: [],
          seriesData2: [],
          seriesData3: [],
        },
        options: [],

        selectableRange: '00:00:00 - 23:00:00',
        pickerOptions: {
          disabledDate(time) {
            const now = new Date();
            now.setMonth(now.getMonth() - 2);
            // 获取两个月前的时间的时间戳
            const twoMonthsAgo = now.getTime();

            let today = new Date()
            today.setHours(23, 59, 59, 999)
            let todayTime = today.getTime()

            return time.getTime() > todayTime - 8.64e7 || time.getTime() < twoMonthsAgo; // 不可选今天之后的日期
          }
        }
      }
    },
    watch: {
      'formInline.reportName': {
        handler(newValue, oldValue) {
          if (this.$refs.cascaderRef) {
            this.$refs.cascaderRef.dropDownVisible = false
          }
        },
        deep: true
      }
    },
    created() {
      this.queryItemsList()
    },
    mounted() {
      charts.lineEchart('line-first', this.oneCarData)
      // let _this = this;
      // this.timeout[0] = setInterval(() => {
      //   _this.queryReportByArea()
      // }, 30000);
    },
    beforeDestroy() {
      if (this.timeout.length > 0) {
        this.timeout.forEach(item => {
          clearInterval(item);
        })
      }
    },
    methods: {
      tableRowClassName({row, rowIndex}) {
        if (rowIndex % 2 === 0) {
          return 'warning-row';
        } else {
          return 'success-row';
        }
      },
      queryItemsList() {
        queryItemsList().then(res => {
          this.options = res.object || []
        })
      },
      handleTimeChange(value) {
        if (value && value.length === 2) {
          const startTime = new Date(value[0]).getTime()
          const endTime = new Date(value[1]).getTime()

          if (endTime - startTime < 2 * 60 * 60 * 1000) { // 6小时的毫秒数
            this.$message.error('结束时间必须晚于开始时间2小时');
            // 重置时间范围
            this.formInline.time = [];
          }
        }
      },

      onSubmit() {
        this.$refs.accountModelRef.validate(async (v) => {
          if (v) {
            this.loading = true
            let that = this
            this.addOrUpdateLoading = true
            let reportName = this.formInline.reportName[this.formInline.reportName.length - 1]
            let startTime = this.formInline.time[0]
            let endTime = this.formInline.time[1]

            await queryReportByArea({
              reportName: reportName,
              startTime: startTime,
              endTime: endTime,
              paramCode: "POWER_SYS",
            }).then(res => {
              let tempData = res.object

              this.oneCarData.xData = tempData.xData
              this.oneCarData.seriesData = tempData.seriesData1
              charts.lineEchart('line-first', this.oneCarData)
              that.loading = false
              that.addOrUpdateLoading = false
            }).catch(() => {
              that.loading = false
              that.addOrUpdateLoading = false
            })

            await queryReportByAreaPage({
              reportName: reportName,
              startTime: startTime,
              endTime: endTime,
              paramCode: "POWER_SYS",
            }).then(res => {
              let tempData = res.object
              this.tableData = tempData
              // this.oneCarData.xData = tempData.xData
              // this.oneCarData.seriesData = tempData.seriesData1
              // charts.lineEchart('line-first', this.oneCarData)
            }).catch(() => {

            })
          }
        })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .height-20 {
    height: 10%;
  }

  .height-80 {
    height: 90%;
  }

  .item_title {
    width: 100%;
    height: 5%;
  }

  .item_content {
    width: 100%;
    height: 95%;
  }

  ::v-deep.el-form-item--medium .el-form-item__label {
    color: #ffffff !important;
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
  }

  ::v-deep.el-button--primary {
    /*color: #fff;*/
    /*background-color: #1A2F2D;*/
    /*border-color: #1A2F2D;*/
  }

  .font-white {
    font-family: Source Han Sans CN, Source Han Sans CN-500;
    font-weight: 500;
    color: #ffffff;
  }
</style>

<style lang="scss">
  .el-date-range-picker__time-picker-wrap .el-time-spinner__wrapper {
    width: 100% !important;
  }

  .el-cascader-node .el-radio__inner {
    border-radius: 0;
    border: 0;
    width: 170px;
    height: 34px;
    background-color: transparent;
    cursor: pointer;
    box-sizing: border-box;
    position: absolute;
    top: -18px;
    left: -19px;
  }

  .el-cascader-node .el-radio__input.is-checked .el-radio__inner {
    background: transparent;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: #0d515a !important;
  }

  .el-table th.el-table__cell {
    background-color: #204B5D !important;
    color: #ffffff;
  }

  .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid #204B5D !important;
  }

  .el-table, .el-table__expanded-cell {
    background: rgba(14, 71, 84, 0.67);
  }

  .el-table::before {
    height: 0px !important;
  }

  .el-table .warning-row {
    background: rgba(14, 71, 84, 0.67);
    color: #ffffff;
  }

  .el-table .success-row {
    background: rgba(14, 71, 84, 0.67);
    color: #ffffff;
  }

  .el-table--scrollable-y .el-table__body-wrapper {
    scrollbar-width: none !important; /* Firefox */
    -ms-overflow-style: none !important; /* IE and Edge */
    background: rgba(14, 71, 84, 0.67);
  }
</style>
